//1. 组件状态（State）
import React, { useState } from 'react';
function Counter() {
  // 使用 useState 钩子创建一个状态变量 count，初始值为 0
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>当前计数: {count}</p>
      <button onClick={() => setCount(count + 1)}>增加</button>
      <button onClick={() => setCount(count - 1)}>减少</button>
    </div>
  );
}
// 异步更新状态示例
function AsyncCounter() {
  const [count, setCount] = useState(0);
  const incrementAsync = () => {
    setTimeout(() => {
      setCount(prevCount => prevCount + 1);
    }, 1000);
  };
  return (
    <div>
      <p>当前计数: {count}</p>
      <button onClick={incrementAsync}>异步增加</button>
    </div>
  );
}

//2. 数据传递（Props）
interface Props {
  message: string;
}

function MessageDisplay({ message }: Props) {
  return <p>消息: {message}</p>;
}
// props.children 示例
function Container({ children }: { children: React.ReactNode }) {
  return <div className="container">{children}</div>;
}
// 使用示例
const messageExample = <MessageDisplay message="你好，React!" />;
const containerExample = (
  <Container>
    <h1>标题</h1>
    <p>这是容器内的内容。</p>
  </Container>
);
console.log(messageExample, containerExample);

export { Counter, AsyncCounter, MessageDisplay, Container };

// 状态提升
function TemperatureInput({
  temperature,
  onTemperatureChange,
}: {
  temperature: string;
  onTemperatureChange: (temp: string) => void;
}) {
  return (
    <input
      type="text"
      value={temperature}
      onChange={e => onTemperatureChange(e.target.value)}
    />
  );
}
function Calculator() {
  const [temperature, setTemperature] = useState('');
  return (
    <div>
      <TemperatureInput
        temperature={temperature}
        onTemperatureChange={setTemperature}
      />
      <p>当前温度: {temperature}°C</p>
    </div>
  );
}
export { Calculator };
